<template>
	<view class="theme">
		<view class="themeList">
			<up-swipe-action>
				<up-swipe-action-item v-for="(item, index) in themeList" :key="item.id" :options="options" @click="clickFun(item)">
					<view class="swipe-action up-border-bottom" :class="index == 0 ? 'up-border-top' : ''">
						<view class="swipe-action__content">
							<text class="swipe-action__content__text">{{ item.plateName }}</text>
						</view>
					</view>
				</up-swipe-action-item>
			</up-swipe-action>
			<view class="noData">没有更多数据了</view>
		</view>
		<view class="addVest dis" @click="open"><up-icon name="plus" color="#fff" size="30rpx"></up-icon></view>
		<up-modal :title="modalTit" :show="showModal" contentTextAlign="center" confirmButtonShape="circle">
			<view class="slot_content">
				<up-input :placeholder="placeholder" border="surround" v-model="plateName"></up-input>
			</view>
			<template #confirmButton>
				<view class="modalBut dis">
					<view class="custom_btn nodeBut" @click="okDel">取消</view>
					<view class="custom_btn" @click="okAdd">确定</view>
				</view>
			</template>
		</up-modal>
	</view>
</template>

<script setup>
import { getSchoolForumPlateList, deleteForumPlate, addForumPlate } from '@/config/api.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	// console.log('options', options);
	schoolId.value = options.schoolId;
	themeListFun();
});
const modalTit = ref('添加主题分类');
const placeholder = ref('请填写主题分类');
// 新增
const plateName = ref('');
const showModal = ref(false);
const okAdd = async () => {
	let res = {};
	if (modalTit.value == '添加主题分类') {
		if (!plateName.value) {
			uni.showToast({
				title: '请填写主题分类',
				icon: 'none'
			});
			return;
		}
		const data = {
			plateName: plateName.value
		};
		res = await addForumPlate(schoolId.value, data);
	} else {
		if (plateName.value == '立即删除') {
			res = await deleteForumPlate(themeId.value, {});
		} else {
			uni.showToast({
				title: '请填写立即删除',
				icon: 'none'
			});
			return;
		}
	}
	if (res.code == 0) {
		showModal.value = false;
		plateName.value = '';
		themeId.value = 0;
		themeListFun();
	}
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
};
const okDel = () => {
	showModal.value = false;
	plateName.value = '';
	themeId.value = 0;
};
const open = () => {
	modalTit.value = '添加主题分类';
	placeholder.value = '请填写主题分类';
	plateName.value = '';
	showModal.value = true;
};

// 查询
const themeList = ref([]);
const themeListFun = async () => {
	const res = await getSchoolForumPlateList(schoolId.value);
	// console.log(res);
	if (res.code == 0) {
		themeList.value = res.data.list;
	}
};
// 删除
const themeId = ref(0);
const options = [
	{
		text: '删除'
	}
];
const clickFun = async (item) => {
	themeId.value = item.id;
	modalTit.value = '确定删除该分类吗？';
	placeholder.value = '请填写立即删除';
	plateName.value = '';
	showModal.value = true;
};
</script>

<style lang="scss" scoped>
.theme {
	.addVest {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #01b3f8;
	}
}
.slot_content {
	width: 100%;
}
.modalBut {
	align-items: center;
	justify-content: space-around;
	width: 100%;
	.custom_btn {
		width: 40%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #fff;
		background-color: #3391e6;
	}
	.nodeBut {
		color: #515151;
		background-color: #f0f0f0;
	}
}

.u-page {
	padding: 0;
}

.u-demo-block__title {
	padding: 10px 0 2px 15px;
}

.swipe-action {
	&__content {
		padding: 25rpx 0;

		&__text {
			font-size: 15px;
			color: #000;
			padding-left: 30rpx;
		}
	}
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
}
.noData {
	padding-top: 30rpx;
	width: 100%;
	color: #999;
	text-align: center;
}
</style>
